<template>
	<div style="width: 100%">
		<NoticeBar
			:scrollable="FieldItem?.attrs.scrollable"
			:left-icon="FieldItem?.attrs['left-icon']"
			:mode="FieldItem?.attrs.showMore && 'link'"
			:style="{
				height: FieldItem?.attrs.height + 'px',
				width: FieldItem?.attrs.width + 'px',
				background: FieldItem?.attrs.background,
				color: FieldItem?.attrs.color,
			}"
			@replay="handlerReplay"
		>
			<template v-if="FieldItem?.dynamicOptions.url != ''">
				{{ FieldItem?.content[currentIndex][FieldItem?.attrs.contentVar] }}
			</template>
			<template v-else>
				{{ FieldItem?.attrs.text }}
			</template>
		</NoticeBar>
	</div>
</template>

<script setup lang="ts">
import { NoticeBar } from 'vant';
import 'vant/lib/index.css';
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import Lxy_page_event_remote from '/@/components/Linxyun/custom/CustomCommon/lxy_page_event_remote.js';
interface newFieldItemType extends TabFieldType {
	content: Record<string, unknown>[];
}
const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: newFieldItemType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData, inputData, globalData } = toRefs(props);

onBeforeMount(() => {
	init();
});

const leftIcon = computed(() => {
	FieldItem?.attrs['left-icon'];
});
const init = async () => {
	if (FieldItem.value?.dynamicOptions.url !== '') {
		const params = {};
		FieldItem.value?.dynamicOptions.params.forEach((item: Record<string, any>) => {
			params[item.name] = item.value;
		});
		const event = new Lxy_page_event_remote(FieldItem.value?.dynamicOptions);
		event.setDataSrc(pageData?.value, props.inputData, globalData?.value);
		const res = await event.callEvent(params);
		if (res.success && res.Records && res.Records.length) {
			FieldItem.value!.content = FieldItem.value?.attrs.rollNum ? res.Records.splice(0, FieldItem.value?.attrs.rollNum) : res.Records;
			if (res.Records.length > 1 && FieldItem.value?.attrs.rollNum > 1) {
				FieldItem.value!.attrs.scrollable = false;
			}
		}
	}
};

const currentIndex = ref<number>(0);
const handlerReplay = () => {
	console.log('handlerReplay');
	if (!FieldItem.value?.content) return;
	if (currentIndex.value >= FieldItem.value!.content!.length - 1) {
		currentIndex.value = 0;
	} else {
		currentIndex.value++;
	}
};
</script>

<style lang="scss" scoped></style>
